#joinus{
  background:url(../img/join/bg.jpg) no-repeat 50% 50%;
  .center{
    width: 663px;
    height: 573px;
    position: absolute;
    background: url(../img/join/1.png) no-repeat 50% 50%;
    text-align: center;
    padding-top: 330px;
    background-size: contain;
  }

  .left-cnt,.right-cnt{
    position: absolute;
    width: 600px;
    height: 100%;
    
    .wrap{
      position: relative;
      width: 100%;
      height: 100%;

      .mask{
        position: absolute;
        width: 100%;
        height: 100%;
        background: #a1a1a1;
        opacity: 0.8;
        transition: all .3s;
        color: #fff;
        font-size: 12px;
        .txt-panel{
          padding: 0 30px;
          overflow: auto;
          text-align: center;
          .new-sect{
            margin-top: 100px;
          }
          .sub-sect{
            padding-left: 20px;
          }
        }
      }

      .btn{
        position: absolute;
        left: 50%;
        top: 50%;
        border: 1px solid #000;
        text-decoration: none;
        font-size: 14px;
        padding: 2px 20px;
        margin-left: -34px;

        &.active{
          border-color: #fff;
          color: #fff;
          
        }
      }
    }
  }
  .left-cnt{
    left: 0;
    top: 0;
    .mask{
      left: -100%;
      &.active{
        left: 0;
      }
    }
  }
  .right-cnt{
    right: 0;
    top: 0;
    .mask{
      right: -100%;
      padding-top: 70px;

      .follow{
        width: 95%;
        display: block;
        margin: 0 auto;
        position: relative;
      }

      &.active{
        right: 0;
      }
    }
  }
}